<template>
	<view>
		<view class="container">
			<view class="container-box">
				<view class="info-box">
					<view class="info-icon">
						<image :src="userInfo.avatar" class="info-img"></image>
					</view>
					<view class="name">{{ userInfo.nickname }}</view>
				</view>
				<view class="input-box">
					<textarea maxlength='1000' v-model="aricle_title" value="" placeholder="快来晒晒你的新鲜事吧~" class="input-btn" />
					</view>
				<view class="">
					<sunuiUpimg :upImgConfig="upImgBasic" @onUpImg="upBasicData" @onImgDel="delImgInfo" ref="uImage"></sunuiUpimg>
				</view>
			</view>
			<view class="banner">
				<view class="assort">
					<view class="cat_text">选择分类</view>
				</view>
				<view class="opt">
					<helang-checkbox ref="checkbox" @change="tapChange"></helang-checkbox>
				</view>
				<view class="address" @tap="getLocation">
					<view :class="'address-text ' + (address != '' ? 'has' : '')">{{ address != '' ? address : '你在哪里?' }}</view>
				</view>
			</view>
			<view class="btn">
				<button type="primary" class="btn-pry" @tap="uPublishTap" :style="'background-color:' + actcolor + ';-webkit-box-shadow:0rpx 4rpx 16rpx #b1b1b1;box-shadow:0rpx 4rpx 16rpx #b1b1b1;'">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
	import sunuiUpimg from "../../../appComponent/uni/sunui-upimg/sunui-upimg-basic.vue"
	import helangCheckbox from "../../../appComponent/uni/helang-checkbox/helang-checkbox.vue"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	
	export default {
			data() {
				return {
					userInfo:{avatar: '../../../static/images/return-top.png', nickname: '昵称'},
					aricle_title:'',
					address:'',
					basicArr: [],
					listData:{},
					fab_content: [],
					fab_pattern:{},
					// 基础版配置
					upImgBasic: {
						// 后端图片接口地址
						basicConfig: {
							url: common.requestDomain + 'appapi.php?g=Appapi&c=HouseApi&a=image'
						},
						// 是否开启提示(提醒上传图片的数量)
						tips: true,
						// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
						notli: true,
						// 图片数量
						count: 9,
						// 相机来源(相机->camera,相册->album,两者都有->all,默认all)
						sourceType: 'all',
						// 是否压缩上传照片(仅小程序生效)
						sizeType: true,
						// 上传图片背景修改 
						upBgColor: '#E8A400',
						// 上传icon图标颜色修改(仅限于iconfont)
						upIconColor: '#fff',
						// 上传svg图标名称
						// upSvgIconName: 'icon-card',
						// 上传文字描述(仅限四个字)
						// upTextDesc: '上传证书',
						// 删除按钮位置(left,right,bleft,bright),默认右上角
						delBtnLocation: '',
						// 是否隐藏添加图片
						// isAddImage: false,
						// 是否隐藏删除图标
						// isDelIcon: false,
						// 删除图标定义背景颜色
						// delIconColor: '',
						// 删除图标字体颜色
						// delIconText: '',
						// 上传图标替换(+),是个http,https图片地址(https://www.playsort.cn/right.png)
						iconReplace: common.requestDomain + 'static/images/house/upimage.png',
					},  
					cat_id:0,
					village_id:0,
					pigcms_id:0,
					actcolor:'',
				};
			},
			onShow() {
				// #ifdef H5
					common.hideWxShare()
				// #endif
			},
			onLoad: function (options) {
				_this = this;
				common.setMainColor(_this, function(config) {
					_this.actcolor = config.config.mobile_head_color
					
					_this.fab_pattern = {
						buttonColor: app.globalData.config.config.mobile_head_color
					}
					if (app.globalData.tabBar && app.globalData.tabBar.list) {
						_this.fab_content = app.globalData.tabBar.list;
					}
					
					if(app.globalData.userInfo){
						_this.userInfo.avatar = app.globalData.userInfo.avatar;
						_this.userInfo.nickname = app.globalData.userInfo.nickname;
						console.log('_this.userInfo', _this.userInfo);
					}
								  
					var res	= uni.getStorageSync("village_key");
					if(res){
						_this.village_id = res.village_id;
						_this.pigcms_id = res.pigcms_id;
					}
					
					common.post('HouseApi&a=bbs_cate_list', {village_id:_this.village_id}, data => {
						if (data) {
							console.log("============")
							console.log(data)
							_this.listData = data;
							_this.$refs.checkbox.set({
								type:'radio',   
								index:0,        
								column:"",      
								list: _this.listData.bbs_list
							});
							if(_this.listData.bbs_list && _this.listData.bbs_list.length > 0){
								_this.tapChange(_this.listData.bbs_list[0]);
							}
						}
					});
				});
			},
			mounted() {
			},
			components: {
				sunuiUpimg,
				"helang-checkbox":helangCheckbox
			},
			methods: {
				getLocation_msg(res){
					console.log('反馈信息：', res);
					_this.address = res.name;
				},
				getLocation(){
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							common.changeLocation('getLocation_msg', _this, res.longitude, res.latitude, 'wgs84');
						},
						fail: function(res) {
							console.log('定位失败：', res);
							uni.showModal({
								content:'定位失败，' + res.errMsg,
								showCancel:false
							})
						}
					});
				},
				
				tapChange(e){
					console.log(e.cat_id)
					_this.cat_id = e.cat_id;
				},
				
				uPublishTap() {
					if(!_this.aricle_title || _this.aricle_title == ''){
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('您需要输入一些文字才能发布'),
							showCancel: false,
							confirmText: common.changeTxt('好的'),
							success: function(res) {
								
							}
						})
						return false;
					}
					var postData = {
						village_id: _this.village_id,
						cat_id: _this.cat_id,
						aricle_title: _this.aricle_title,
						inputimg: _this.basicArr,
						address: _this.address,
					};
					console.log('_this.basicArr.postData', postData);
					
					common.post('HouseApi&a=web_bbs_aricele_wite_new', postData
					, data => {
					  uni.showModal({
					  	title: common.changeTxt('提示'),
					  	content: common.changeTxt('发布成功'),
					  	showCancel: false,
					  	confirmText: common.changeTxt('好的'),
					  	success: function(res) {
					  		if (res.confirm) {
								if (common.checkIsFooterPage('/pages/village_menu/resident')) {
									uni.switchTab({
										url: '/pages/village_menu/resident'
									});
								} else {
									uni.redirectTo({
										url: '/pages/village_menu/resident'
									})
								}
					  		}
					  	}
					  });
					});
				},
				// 删除图片 -2019/05/12(本地图片进行删除)
				async delImgInfo(e) {
					console.log('你删除的图片地址为:', e, this.basicArr.splice(e.index, 1));
				},
				// 基础版
				async upBasicData(e) {
					console.log('===>',e);
					// 上传图片数组
					let arrImg = [];
					for (let i = 0, len = e.length; i < len; i++) {
						try {
							if (e[i].path_server != "") {
								await arrImg.push(e[i].path_server);
							}
						} catch (err) {
							console.log('上传失败...');
						}
					}
					// 图片信息保存到data数组
					this.basicArr = arrImg;
	
					// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
					if (arrImg.length == this.upImgBasic.count) {
						uni.showToast({
							title: `上传成功`,
							icon: 'none'
						});
					}
				},
				trigger(param) {
					var url = param.item.pagePath;
					if (_this.village_id) {
						url = common.changeURLArg(url, 'village_id', _this.village_id);
					}
					if (_this.pigcms_id) {
						url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
					}
					console.log('tabbar url', url);
					common.parseUrl(url, '', false, param.item.text);
				},
			}
		}
	
</script>

<style>
	.container {
		margin: 0px;
		background: #FFFFFF;
		overflow: hidden;
	}
	.container-box {
		background: #FFFFFF;
		padding: 27rpx;
	}
	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.info-icon {
		width:78rpx;
		height:78rpx;
	}
	.info-img {
		width: 100%;
		height: 100%;
	}
	.name {
		font-size:30rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:78rpx;
		padding-left: 18rpx;
	}
	.input-box {
		margin-top: 40rpx;
	}
	.input-btn {
		height: 150rpx;
		width: 100%;
	}
	.banner {
		background: #FFFFFF;
		overflow: hidden;
		padding-left: 27rpx;
		margin-top: 15rpx;
	}
	.assort {
		background: #FFFFFF;
		margin-top: 15rpx;
		padding: 18rpx 0;
	}
	.cat_text {
		font-size:32rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:60rpx;
	}
	.assort-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.opt {
		background: #FFFFFF;
	}
	.opt-assort {
		height:65rpx;
		background:rgba(244,244,244,1);
		border-radius:33rpx;
		padding: 0 32rpx;
		font-size:24rpx;
		font-weight:500;
		color:rgba(102,102,102,1);
		line-height:65rpx;
		margin: 15rpx 0rpx 15rpx 27rpx;
	}
	.address {
		margin-left: 0rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		border:2rpx solid rgba(209,209,209,1);
		border-radius:30rpx;
		display:inline-block;
	}
	.address-text {
		font-size:24rpx;
		font-weight:500;
		color:rgba(204,204,204,1);
		line-height:40rpx;
		padding: 8rpx 20rpx 8rpx 10rpx;
	}
	.address-text:before {
		content: "";
		width:45rpx;
		height:45rpx;
		background: url(../../../static/images/dingwei.png) no-repeat;
		background-size: cover;
		display: block;
		float: left;
	}
	.address-text.has{
		color:black;
	}
	.btn {
		margin: 74rpx 0rpx;
		height: 100%;
	}
	.btn-pry {
		width:680rpx;
		height:98rpx;
		background:rgba(6,193,174,1);
		border-radius:49rpx;
		line-height: 98rpx;
	}
	.content-class {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
</style>
